<template>
  <div style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 750px;height: 750px;">
    <svg id="posterSvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1"
         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 750 750">
      <defs id="SvgjsDefs1001"></defs>
      <g id="SvgjsG1007" class="svgPosterGroup">
        <g id="SvgjsG1008" transform="matrix(1,0,0,1,0,0)" data-type="model" class="parentGroup" style="opacity: 1;">
          <g id="SvgjsG1009">
            <g id="SvgjsG1010">
              <svg id="SvgjsSvg1011" width="750" height="750" viewBox="0 0 750 750"
                   style="top: 0px; left: 0px;" xmlns="http://www.w3.org/2000/svg" version="1.1"
                   xmlns:xlink="http://www.w3.org/1999/xlink">
                <defs id="SvgjsDefs1012"></defs>
                <rect id="SvgjsRect1013" width="750" height="750" opacity="0" class="modelRect"></rect>
                <g id="SvgjsG1014" class="modelGroup">
                  <image id="SvgjsImage1015"
                         xlink:href="http://192.168.3.191:3000/nodeapi/proxy_image?url=https%3A%2F%2Fapp.mmtcapp.com%2Fstatic%2Fupload%2Fimage%2F20181201%2F20181201154734_48161.png"
                         width="750" height="750"></image>
                </g>
              </svg>
            </g>
          </g>
        </g>
        <g id="SvgjsG1016" transform="matrix(1,0,0,1,79,116)" data-type="text" class="parentGroup" style="opacity: 1;">
          <g id="SvgjsG1017">
            <g id="SvgjsG1018">
              <svg id="SvgjsSvg1019" width="543" height="91" viewBox="0 0 543 91"
                   fill="#1f747a" style="top: 0px; left: 0px;" xmlns="http://www.w3.org/2000/svg" version="1.1"
                   xmlns:xlink="http://www.w3.org/1999/xlink">
                <defs id="SvgjsDefs1020"></defs>
                <rect id="SvgjsRect1021" width="543" height="91" opacity="0" class="modelRect"></rect>
                <g id="SvgjsG1024" data-textAlign="center" transform="matrix(1,0,0,1,29,-12.5)">
                  <text id="SvgjsText1022" font-family="Helvetica, Arial, sans-serif" font-size="97" size="97" x="0"
                        y="92">
                    <tspan id="SvgjsTspan1023" dy="0">你好，早安</tspan>
                  </text>
                </g>
              </svg>
            </g>
          </g>
        </g>
      </g>
    </svg>
  </div>
</template>

<script>
  import { mapState } from 'vuex'

  import Deploy2style from '../../libs/deploy2style'

  import config from '../../libs/config'

  const PROXY_URL = `${config.host}/nodeapi/proxy_image?url=`
  const TEXT_SCALE = 0.89
  import SVG from 'svg.js'

  export default {
    components: {},
    data () {
      return {
        message: '',
        isHH: false,
        width: 750,
        height: 750,
        img_special: 'https://app.mmtcapp.com/static/upload/image/20181201/20181201154734_48161.png',
        tableData: [
          {
            'content': '你好，早安',
            'style': {
              'type': '1',
              'color': '#1f747a',
              'height': '91px',
              'left': '79px',
              'top': '116px',
              'width': '493px',
              'letter-spacing': '2px',
              'line-height': '91px',
              'text-align': 'center',
              'font-size': '97px'
            }
          }
        ]
      }
    },
    computed: {
      ...mapState({})
    },
    inject: [],
    created () {
      this.$nextTick(function () {
        // this.SVG_JS('posterSvg', {width: this.width, height: this.height, image: this.img_special}, this.tableData)
      })
    },
    methods: {
      SVG_JS: async function (element, {width = 750, height = 750, image} = {}, list = []) {
        let that = this
        let $ = that.util.Zepto
        if (!SVG.supported) {
          alert('当前浏览器SVG不受支持，请更换浏览器使用！！！')
          return
        }
        if (!element) return
        let model = {width, height, image}
        let draw = SVG(element)
        let group = draw.group().addClass('svgPosterGroup')
        if (image) {
          group.add(await that.drawModelImage(draw, model))
        }
        for (let v of list) {
          setTimeout(function () {
            if ('1'.indexOf(v.style.type) > -1) {
              let textGroup = that.drawSvgText(draw, v, model)
              group.add(textGroup)
            }
          })
        }
      },
      // 绘制背景图
      async drawModelImage (draw, {width = 750, height = 750, image} = {}) {
        let that = this
        let model = {width, height, image}
        const parentGroup = await draw.group().rotate(0).attr({'data-type': 'model'}).style({opacity: 1})
        const hoveMoveGroup = await draw.group()
        const svgGroup = await draw.group()
        parentGroup.addClass('parentGroup')
        parentGroup.add(hoveMoveGroup.add(svgGroup))
        let id = svgGroup.attr('id')
        // 绘制文字SVG盒子
        let pathDraw = await SVG(id).size(model.width, model.height).viewbox(0, 0, model.width, model.height).style({
          top: 0,
          left: 0
        })
        await svgGroup.add(pathDraw)
        // 绘制透明矩形
        const rect = await pathDraw.rect(model.width, model.height).attr({opacity: 0})
        rect.addClass('modelRect')
        let url = image
        if (/(:3000)/ig.test(PROXY_URL) || location.origin !== config.host) {
          url = PROXY_URL + encodeURIComponent(image)
        }
        const group = pathDraw.group()
        group.addClass('modelGroup')
        let modelGroup = pathDraw.image(url, model.width, model.height)
        group.add(modelGroup)
        return parentGroup
      },
      // 绘制文字元素
      drawSvgText (draw, item = {}, {width = 750, height = 750} = {}) {
        let that = this
        let model = {width, height}
        let style = {...Deploy2style.basisFilter(item.style)}
        for (let k in style) {
          let val = style[k]
          if (Deploy2style.isPixel(val) || /^-?\d{0,}.?\d+$/ig.test(val)) {
            style[k] = parseFloat(val)
          }
        }
        item.$style = style
        item.svgDrow = {}
        let content = item.content
        let txtWidth = item.$style.width / TEXT_SCALE
        if (txtWidth - item.$style.width > 50) {
          txtWidth = item.$style.width + 50
        }
        if (txtWidth >= model.height) {
          txtWidth = model.width
        }
        let txtHeight = item.$style.height
        const parentGroup = draw.group().rotate(0).attr({'data-type': 'text'}).style({opacity: 1})
        const hoveMoveGroup = draw.group()
        if (+item.status === 1) {
          hoveMoveGroup.addClass('hoveMove')
        }
        const svgGroup = draw.group()
        parentGroup.x(item.$style.left).y(item.$style.top).addClass('parentGroup')
        parentGroup.add(hoveMoveGroup.add(svgGroup))
        let id = svgGroup.attr('id')
        // 绘制文字SVG盒子
        let pathDraw = SVG(id).size(txtWidth, txtHeight).viewbox(0, 0, txtWidth, txtHeight).style({
          top: 0,
          left: 0
        })
        item.svgDrow.parentNode = pathDraw
        svgGroup.add(pathDraw)
        // 绘制透明矩形
        const rect = pathDraw.rect(txtWidth, txtHeight).attr({opacity: 0})
        rect.addClass('modelRect')
        item.svgDrow.childModelRect = rect
        pathDraw.attr({fill: item.$style.color})
        let text = pathDraw.text(function (add) {
          add.tspan(item.content).dy(0)
        })
        text.font({size: item.$style.fontSize}).x(0).y(0)
        let bbox = text.bbox()
        let textWidth = bbox.width
        let textHeight = bbox.height
        let group = pathDraw.group().add(text)
        group.data('textAlign', item.$style.textAlign)
        let txtPadding = 0
        // 居中布局
        console.log(textWidth, textHeight)
        if (item.$style.textAlign === 'center') {
          txtPadding = (txtWidth - textWidth) / 2
        } else if (item.$style.textAlign === 'right') {
          txtPadding = (txtWidth - textWidth)
        }
        group.translate(txtPadding, (txtHeight - textHeight) / 2)
        // 元素旋转
        parentGroup.rotate(style.rotate || 0)
        return parentGroup
      },
    }
  }
</script>

<style scoped lang="less">
  .azm-demo {
    .azm-poster-box {
      position: relative;
      width: 300px;
      height: 400px;
      /*overflow: hidden;*/

      &.overflow {
        overflow: visible;
      }

      .azm-poster-item {
        position: absolute;
        z-index: 2;
        top: 56px;
        left: 90.3%;
        width: 421px;
        height: 60.8px;
        color: rgb(0, 0, 0);
        text-align: left;
        transform: rotateZ(90deg);
        transform-origin: top left;
        font-size: 60px;
      }
    }
  }
</style>
<style lang="less">
  .azm-demo {
  }
</style>
